<template>
  <div>
    <div class="title">周末去哪里玩</div>
    <ul>
      <li class="item border-bottom" v-for="item in list" :key="item.id">
        <div class="item-img-wrapper">
          <img class="item-img" :src="item.imgUrl" :alt="item.title">
        </div>

        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
          <div class="item-price">
            <span>{{item.price}}</span>
            <span>杭州</span>
          </div>
        </div>
      </li>


    </ul>
  </div>
</template>

<script>
  export default {
    name: "HomeRecommend",
    props:{
      list:Array
    }

  }
</script>

<style lang="stylus" scoped>
  //@import '~styles/border.css'为什么写这个不可以，写下面这个可以。
  //@import '../../../assets/styles/border.css'
  @import '~styles/varibles.styl'
  .title
    background: #eeeeee
    margin-top:.2rem
    line-height:0.8rem
    text-indent:0.2rem
  .item
    width: 100%
    padding-top:0.1rem
    .item-img-wrapper
       height:0
       overflow:hidden
       padding-bottom:33.9%
       .item-img
         width:100%


    .item-info
       padding:0.1rem
      .item-title
        line-height:0.54rem
        font-size:0.32rem
        background:#e0e0e0;
      .item-desc
        line-height:0.54rem
        background:green
      .item-price
        line-height:0.44rem
        background:#9966ff
        margin-top:0.16rem
        padding: 0 .2rem
        border-radius: .06rem


</style>
